<script setup lang="ts" name="Count">
import { ref } from 'vue'

// 数据
let sum = ref(0)
let num = ref(1)
// 方法
function add() {
  sum.value += num.value
}

function sub() {
  sum.value -= num.value
}
</script>

<template>
  <div class="count">
    <h1>当前求和为：{{ sum }}</h1>
    <select v-model.number="num">
      <option value="1">1</option>
      <option value="2">2</option>
      <option value="3">3</option>
    </select>
    <button @click="add">+</button>
    <button @click="sub">-</button>
  </div>
</template>

<style scoped>
.count {
  background-color: #dab649;
  padding: 10px;
  border-radius: 10px;
  box-shadow: 0 0 10px;
}

select,
button {
  margin: 0 10px;
  height: 20px;
}
</style>
